<template>
  <div class="baseInfo">
    <Card :title="title" :isShowTitle="false">
      <a-spin tip="Loading..." :spinning="isLoading">
        <a-form-model
          ref="ruleForm"
          :rules="rules"
          :model="form"
          hideRequiredMark
          labelAlign="left"
          :colon="false"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-form-model-item prop="userName" :label="$t('common.username')">
            <a-input v-model="form.userName" :disabled="userNameEdit" />
          </a-form-model-item>

          <a-form-model-item prop="language" :label="$t('subAccount.language')">
            <a-select v-model="form.language" @change="handleSelectChange">
              <a-select-option
                :value="item.key"
                v-for="item in supportLang.lang"
                :key="item.key"
              >
                {{ item.desc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- <a-form-model-item prop="timeZone" label="Time Zone：">
            <a-tooltip trigger="click">
              <template slot="title">The field is required.</template>
              <a-select v-model="form.timeZone" @change="handleSelectChange">
                <a-select-option
                  v-for="item in timeZoneList"
                  :value="item.key"
                  :key="item.key"
                >
                  {{ item.value }}
                </a-select-option>
              </a-select>
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item
            label="Full Name："
            :style="{ 'margin-bottom': '0' }"
          >
            <a-form-model-item
              prop="fullName.firstName"
              :style="{ display: 'inline-block', width: 'calc(50% - 8px)' }"
            >
              <a-tooltip trigger="click">
                <template slot="title"
                  >Please enter less than 60 characters.</template
                >
                <a-input v-model="form.fullName.firstName"
              /></a-tooltip>
            </a-form-model-item>

            <span
              :style="{
                display: 'inline-block',
                width: '16px',
                textAlign: 'center',
              }"
            ></span>
            <a-form-model-item
              prop="fullName.lastName"
              :style="{ display: 'inline-block', width: 'calc(50% - 8px)' }"
            >
              <a-tooltip trigger="click">
                <template slot="title"
                  >Please enter less than 60 characters.</template
                ><a-input v-model="form.fullName.lastName"
              /></a-tooltip>
            </a-form-model-item>
          </a-form-model-item>
          <a-form-model-item prop="email" label="Email：">
            <a-tooltip trigger="click">
              <template slot="title">The field is required.</template>
              <a-input v-model="form.email" :disabled="emailEdit" />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item prop="address " label="Country：">
            <a-tooltip trigger="click">
              <template slot="title">The field is required.</template>
              <a-input v-model="form.address" :disabled="userNameEdit" />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item prop="company" label="Company：">
            <a-tooltip trigger="click">
              <template slot="title"
                >Please enter less than 250 characters.</template
              >
              <a-input v-model="form.company" />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item prop="mobile" label="Mobile：">
            <a-tooltip trigger="click">
              <template slot="title"
                >Please enter less than 25 characters.</template
              >
              <a-input v-model="form.mobile" />
            </a-tooltip>
          </a-form-model-item>-->
          <a-form-model-item :wrapper-col="{ span: 13, offset: 7 }">
            <a-button type="primary" @click="onSubmit" block>
              {{ $t('common.save') }}
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </Card>
  </div>
</template>

<script>
import { requestHttp, maccApi, TimeZone } from '@utils/index';
import Card from '../../components/Card.vue';
import { mapState } from 'vuex';
import supportLang from '@components/layout/supportLang.js';
export default {
  name: 'baseInfoIntl',
  components: {
    Card,
  },
  data() {
    return {
      title: this.$t('accountNew.userInfo'),
      isLoading: false,
      supportLang,
      cloud: '',
      form: {
        userName: '',
        language: 'en',
        timeZone: '',
        fullName: { firstName: '', lastName: '' },
        email: '',
        company: '',
        mobile: '',
        address: '',
      },
      timeZoneList: TimeZone(),
      userNameEdit: false,
      emailEdit: false,
      rules: {
        userName: {
          required: true,
          message: this.$t('userManage.fieldIsRquired'),
          trigger: 'blur',
        },
        // timeZone: {
        //   required: true,
        //   message: this.$t('userManage.fieldIsRquired'),
        //   trigger: 'blur',
        // },
        email: {
          required: true,
          message: this.$t('userManage.fieldIsRquired'),
          trigger: 'blur',
        },
        address: {
          required: true,
          message: this.$t('userManage.fieldIsRquired'),
          trigger: 'blur',
        },
        // 'fullName.firstName': [
        //   {
        //     message: this.$t('userManage.fieldIsRquired'),
        //     required: true,
        //     trigger: 'blur',
        //   },
        //   {
        //     message: 'Please enter less than 60 characters.',
        //     min: 0,
        //     max: 60,
        //     trigger: 'blur',
        //   },
        // ],
        // 'fullName.lastName': [
        //   {
        //     message: this.$t('userManage.fieldIsRquired'),
        //     required: true,
        //     trigger: 'blur',
        //   },
        //   {
        //     message: 'Please enter less than 60 characters.',
        //     min: 0,
        //     max: 60,
        //     trigger: 'blur',
        //   },
        // ],
        company: {
          message: this.$t('common.byteRange', [250]),
          min: 0,
          max: 250,
          trigger: 'blur',
        },
        mobile: [
          {
            message: this.$t('common.byteRange', [25]),
            min: 0,
            max: 25,
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    ...mapState('User', ['tenantInfo', 'userInfo']),
    isAADAccount() {
      return this.userInfo.azureObjectId ? true : false;
    },
  },
  created() {
    this.loadBaseInfo();
  },
  methods: {
    handleSelectChange() {},
    async loadBaseInfo() {
      this.isLoading = true;
      var data = {
        api: maccApi.ACCOUNT_INFO,
        method: 'GET',
      };
      let res = await requestHttp(data);
      if (res && res.code == 0) {
        this.form.userName = res.account;
        this.form.language = res.language;
        this.form.timeZone = res.timeZone;
        this.form.fullName.firstName = res.firstName;
        this.form.fullName.lastName = res.lastName;
        this.form.email = res.email;
        this.form.company = res.company;
        this.form.mobile = res.phone;
        this.form.address =
          res.address === 'Turkey' ? 'Turkiye' : res?.address || '';
        if (res.account != '') this.userNameEdit = true;
        if (res.email != '') this.emailEdit = true;
      }
      this.isLoading = false;
    },
    async onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const params = {
            language: this.form.language,
            timeZone: this.form.timeZone,
            firstName: this.form.fullName.firstName,
            lastName: this.form.fullName.lastName,
            company: this.form.company,
            phone: this.form.mobile,
          };
          var data = {
            api: maccApi.ACCOUNT_INFO,
            method: 'PUT',
            params: params,
          };
          let res = await requestHttp(data);
          console.log(res);
          if (res && res.code == 0) {
            this.$message.info(res.msg);
            this.loadBaseInfo();

            // 这一步体验不太好
            window.top.location.reload();
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url('@/project/authSys/assets/skin/common.less');
</style>
